import { useState, useEffect } from 'react'
import { Input } from 'tdesign-react'
import styles from './index.module.less'

const BorderlessInput = (props: any) => {

  // const { inputValue, onInputChange } = props
  const { value, onChange, onSubmit } = props
  // const [value, setValue] = useState('')
  const [editMode, setEditMode] = useState<boolean>(false)

  // useEffect(() => {
  //   setValue(inputValue)
  // }, [inputValue])

  // const onChange = (e: any) => {
  //   setValue(e)
  // }

  // const onBlur = (e: any) => {
  //   setEditMode(false)
  //   // onInputChange(e)
  // }

  // return <div className={styles.borderlessInput}>
  return <Input
    className={`${styles.borderLessInput}${editMode ? (' ' + styles.edit) : ''}`}
    borderless={true}
    autoWidth={true}
    size='small'
    placeholder={value}
    value={value}
    type="text"
    onChange={onChange}
    onFocus={() => { setEditMode(true) }}
    onBlur={() => { setEditMode(false); onSubmit() }}
  />
}

export default BorderlessInput
